<template>
<div>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>业务类型</span>
			<el-button style="float: right; padding: 3px 0" type="text" @click="addBillingRuleevent('add')">
				添加业务类型
			</el-button>
		</div>
		<el-table v-loading="tableDataLoading" :data="tableData">
			<el-table-column v-for='(s, i) in tableOption' :key='i' :prop='s.prop' :label='s.label'
							 :min-width='s.width'
							 align='center'/>
			<el-table-column label='操作' prop='enabled' fixed='right' width='300'>
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click="addBillingRuleevent('edit',scope.row)">编辑
					</el-button>
					<el-button size="mini" type="danger"
							   @click="del(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
	<!--	业务类型-->
	<el-dialog :title="addBillingRule.titleName" :visible.sync="addBillingRule.dialogFormVisible" width="500px">
		<el-form :model="addBillingForm" :rules="addBillingRule.rules" ref="ruleForm" label-width="80px">
			<el-form-item label="业务类型" prop="name">
				<el-input class="w200"   v-model="addBillingForm.name" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="订单渠道" prop="channelCode">
				<el-select class="w200" multiple v-model="addBillingForm.channelCode" placeholder="请选择">
					<el-option
						v-for="item in orderChannel"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="价格表" prop="priceConfigId">
				<el-select class="w200" v-model="addBillingForm.priceConfigId" placeholder="请选择">
					<el-option
						v-for="item in priceList"
						:key="item.id"
						:label="item.name"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="提成方式" prop="commissionId">
				<el-select class="w200" v-model="addBillingForm.commissionId" placeholder="请选择">
					<el-option
						v-for="item in formOfCommission"
						:key="item.id"
						:label="item.name"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="cancelBillingRule">取 消</el-button>
			<el-button type="primary" @click="submitBillingRule">确 定</el-button>
		</div>
	</el-dialog>

</div>
</template>

<script>
export default {
	name: 'billingRule',
	data(){
		return{
			tableDataLoading: false,
			tableData: [],
			tableOption: [
				{label: '渠道', prop: 'name'},
				{label: '价格表', prop: 'priceConfigName'},
				{label: '提成方式', prop: 'commissionName'},
			],
			addBillingRule: {
				titleName: '',
				dialogFormVisible: false,
				form: {},
				rules: {
					channelCode: [
						{required: true, message: '请选择订单渠道', trigger: 'change'},
					],
					priceConfigId: [
						{required: true, message: '请选择价格表', trigger: 'change'},
					],
					commissionId: [
						{required: true, message: '请选择提成方式', trigger: 'change'},
					],
					name: [
						{required: true, message: '请输入原因', trigger: 'blur'},
					],
				}
			},
			addBillingForm:{
				name: "",
				channelCode: [],
				enable: null,
				priceConfigId: null,
				commissionId: null
			},
			orderChannel:[
				{label:'代客下单',value:1},
				{label:'小程序',value:2},
				{label:'扫码报单',value:3},
				{label:'系统派单',value:4},
				{label:'司机转单',value:5},
			],
			billingRule: {},
			priceList: [],
			formOfCommission: [],
		}
	},
	methods:{
		//删除
		del (item) {
			this.$confirm(`确定删除此条信息?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					url: this.$http.adornUrl(`sys/business/delete`),
					method: 'get',
					params:{id:item.id}
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.getList()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'error',
							duration: 1500,
						})
					}
				})
			}).catch(() => {
			})
		},
		common(){
			//价格表
			this.$http({
				url: this.$http.adornUrl('sys/price/list'),
				method: 'get',
			}).then(res=>{
				console.log('价格表下拉',res.data)
				if(res.data.data) {
					this.priceList = res.data.data
				}
			})
			//提成方式
			this.$http({
				url: this.$http.adornUrl('sys/commission/list'),
				method: 'get',
			}).then(res=>{
				console.log('提成方式下拉',res.data)
				if(res.data.data){
					this.formOfCommission=res.data.data
				}
			})
		},
		getList () {
			let data ={
				pageNum:1,
				pageSize:10
			}
			this.tableDataLoading = true
			this.$http({
				url: this.$http.adornUrl('sys/business/page'),
				method: 'get',
				params:data
			}).then(({
				data
			}) => {
				console.log('列表',data)
				if(data.data.records) {
					this.tableDataLoading = false
					this.tableData = data.data.records
				}else{
					this.tableData =[]
				}
			}).finally(() => {
				this.tableDataLoading = false
			})
		},
		cancelBillingRule () {
			this.addBillingRule.dialogFormVisible = false
			this.addBillingRule.titleName = ''
			this.addBillingForm = {
				name: "",
				channelCode: "",
				enable: null,
				priceConfigId: null,
				commissionId: null
			}
           this.getList()
		},
		submitBillingRule () {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					this.addBillingForm.channelCode = this.addBillingForm.channelCode.join(',')
					if (this.addBillingForm.id) {
						this.$http({
							url: this.$http.adornUrl('sys/business/update'),
							method: 'post',
							data: {
								channelCode: this.addBillingForm.channelCode,
								commissionId: this.addBillingForm.commissionId,
								enable: this.addBillingForm.enable,
								id: this.addBillingForm.id,
								name: this.addBillingForm.name,
								priceConfigId: this.addBillingForm.priceConfigId,
							}
						}).then(({
							data
						}) => {
							if (data.code == 0) {
								this.$message({
									message: '操作成功',
									type: 'success',
									duration: 1500,
									onClose: () => {
										this.cancelBillingRule()
									}
								})
							} else {
								this.$message({
									message: data.msg,
									type: 'error',
									duration: 1500,
								})
							}
						})
					} else {
						this.addBillingForm.enable=1
						this.$http({
							url: this.$http.adornUrl('sys/business/add'),
							method: 'post',
							data: this.addBillingForm
						}).then(({
							data
						}) => {
							if (data.code == 0) {
								this.$message({
									message: '新增成功',
									type: 'success',
									duration: 1500,
									onClose: () => {
										this.cancelBillingRule()
									}
								})
							} else {
								this.$message({
									message: data.msg,
									type: 'error',
									duration: 1500,
								})
							}
						})
					}
				} else {
					this.$message.error('请输入必填选项')
				}
			});


		},
		addBillingRuleevent (state, item) {
			switch (state) {
				case 'add':
					this.addBillingRule.dialogFormVisible = true
					this.addBillingRule.titleName = '新增业务类型'
					this.addBillingForm = {
						name: "",
						channelCode: [],
						enable: null,
						priceConfigId: null,
						commissionId: null
					}
					break
				case 'edit':
					this.addBillingRule.dialogFormVisible = true
					this.addBillingRule.titleName = '编辑业务类型'
					this.$http({
						url:'/sqx_fast/sys/business/detail',
						method: 'get',
						params: {id:item.id}
					}).then(res=>{
						this.addBillingForm = res.data.data
						this.addBillingForm.channelCode = this.addBillingForm.channelCode.split(',')
						if(this.addBillingForm.channelCode.length){
							this.addBillingForm.channelCode =this.addBillingForm.channelCode.map(item=>{
								return Number(item)
							})
						}
					})
					break
			}
		},
	}
}
</script>

<style scoped>
.w200 {
	width: 300px !important;
}
.clf7d196{
	color: #f7d196;
}
</style>
